{% extends 'base.html' %}
{% block body %}
    <script type="text/javascript" charset="utf-8">

        function addData(el, hours){
            console.log('setting ', hours, 'on', el);
            rounding = 1000; // 3 decimal places
            units = {
                hours: 1.0, 
                days: 8.0, 
                weeks: 40.0, 
                months: 160.0, 
                years: 1920.0
            };
            for(key in units){
                var value = Math.round((hours / units[key]) * rounding) / rounding;
                $(el).data(key, value);
            }
        }

        function calcTotals(){
            var total = 0;
            $('tr.subtotal').each(function(){
                var sum = 0;
                var tickets = $(this).parent().find('tr').each(function(){
                    if(!$(this).is(':hidden')){
                        var estimate = $(this).find('td.estimated_time').data('hours');
                        estimate = parseInt(estimate);
                        if(estimate){
                            sum += estimate;
                        }                        
                    }
                });
                hours = sum;
                total += sum;
                addData($(this).find('td:last'), hours);
            });
            hours = total;
            addData($('td#total'), hours);
        };
        
        function reformatEstimates(){
            var value = $('#unit').val();
            $('td.estimated_time, td#total, td.subtotal').each(function(){
                $(this).html($(this).data(value));
            });
            $('th.estimated_time').html('Estimated Time ('+value+')');
        };
        
        $(document).ready(function(){
            calcTotals();
            reformatEstimates();
            $('#unit').change(function(){
                reformatEstimates();
            });
            $('#include_complete').change(function(){
                var include = $(this).is(':checked');
                $('tr.completed').each(function(){
                    if(include){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
                calcTotals();
                reformatEstimates();
            });
        });
    </script>
    <div class="instance">
    <h2><a href="/projects/{{category.project.key}}/">{{category.project.name}}</a> > {{category.name}}</h2>
    <p>{% if category.total_hours %}
        <img src="{{category.chart_link}}"></p>
    {% endif %}
    <table class="subproject">
    	<caption>Tickets assigned to this subproject. Show estimate in <select name="unit" id="unit">
    	   <option value="hours">hours</option>
    	   <option value="days">days</option>
    	   <option value="weeks">weeks</option>
    	   <option value="months">months</option>
    	   <option value="years">years</option>
    	</select> Include completed work <input id="include_complete" type="checkbox" name="include_complete" value="include_complete" checked>
    	<br><em>You can copy and paste the contents of this table into Excel for budgeting purposes.</em>
    	</caption>
    	<thead>
    		<tr>
    			<th scope="col">Status</th>
    			<th scope="col">Milestone</th>
    			<th scope="col">Phase</th>
    			<th scope="col">Owner</th>
    			<th scope="col">Summary</th>
    			<th class="estimated_time" scope="col">Estimated Time</th>
    		</tr>
    	</thead>
    	{% for phase, tickets in phases.items %}
    	   <tbody>
    	       {% for ticket in tickets %}
                <tr class="{{ticket.status}} include {% if ticket.completed %} completed{% endif %}">
                    <td class="status">{{ticket.status}}</td>
                    <td class="milestone">{{ticket.milestone}}</td>
                    <td class="phase">{{ticket.phase}}</td>
                    <td class="committer">{{ticket.committer}}</td>
                    <td class="summary">{{ticket.summary}}</td>
                    <td data-hours="{{ticket.hours}}" data-days="{{ticket.days}}" data-weeks="{{ticket.weeks}}" data-months="{{ticket.months}}" class="estimated_time">{{ticket.estimated_time}}</td>
                </tr>    	           
    	       {% endfor %}
    	       <tr class="subtotal">
                   <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
    	          <td>subtotal</td>
    	          <td class="subtotal" id="SubtotalPhase-{{phase}}"></td> 
    	       </tr>
    	   </tbody>
    	{% endfor %}
    	<tbody>
    	<tfooter>
    	   <tr class="total">
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
    	       <td>total</td>
    	       <td id="total"></td>
    	   </tr>
    	</tfooter>
    	</tbody>
    </table>
    </div>
{% endblock body %}